<!--<template>-->
<!--  <div class="flyparameter">-->
<!--    <div class="toolbar">-->
<!--      &lt;!&ndash;<div class="toolbar&#45;&#45;left">-->
<!--        <i class="el-icon-back mr-2" />-->
<!--        <router-link :to="`/flyparameter/${$route.params.id}`" class="font-bold">Back</router-link>-->
<!--      </div>&ndash;&gt;-->
<!--      <el-page-header :show-back="showBack" :content="$t('flyparam.app_name')+ `: ${innerAppName}`" @back="back" />-->
<!--      <div class="toolbar&#45;&#45;right">-->
<!--        <el-dropdown split-button class="save-dropdown" @click="saveAll">-->
<!--          <svg-icon-->
<!--            icon-class="save"-->
<!--            class="text-lg icon-save toolbar-icon"-->
<!--          />-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item v-for="tab in tabs" :key="tab.id" :disabled="!(tab.paramSchemaDesignChange || tab.positionChanged)">-->
<!--              <div class="flex items-center" @click="() => save(tab.id)">-->
<!--                {{ tab.name }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--        &lt;!&ndash; <el-tooltip class="item" effect="light" :content="$t('flyparam.saveTemplate_tip')" placement="bottom">-->
<!--          <svg-icon-->
<!--            icon-class="save"-->
<!--            class="mr-5 text-lg icon-save toolbar-icon"-->
<!--            :class="{disabled: !changed}"-->
<!--            @click="saveAll"-->
<!--          />-->
<!--        </el-tooltip> &ndash;&gt;-->
<!--        <el-dropdown @command="handlePreviewCommand">-->
<!--          <span class="el-dropdown-link">-->
<!--            <svg-icon icon-class="eye-open" class="mr-5 text-lg icon-eye toolbar-icon" />-->
<!--          </span>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item command="dataPreview">-->
<!--              <div class="flex items-center">-->
<!--                <svg-icon icon-class="file-zip" class-name="mr-[5]" />{{ $t('flyparam.data_preview') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--            <el-dropdown-item command="confPagePreview">-->
<!--              <div class="flex items-center">-->
<!--                <svg-icon icon-class="web-page" class-name="mr-[5]" />{{ $t('flyparam.page_preview') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--        <el-dropdown @command="handleToolbarCommand">-->
<!--          <span class="el-dropdown-link mr-5">-->
<!--            <i class="el-icon-s-tools" />-->
<!--          </span>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item command="undo">-->
<!--              <div class="flex items-center">-->
<!--                <svg-icon icon-class="revoke" class-name="mr-[5]" />{{ $t('flyparam.undo') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--            <el-dropdown-item command="redesign">-->
<!--              <div class="flex items-center">-->
<!--                <i class="el-icon-delete" />-->
<!--                {{ $t('flyparam.redesign') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--            <el-dropdown-item command="import/export">-->
<!--              <div class="flex items-center">-->
<!--                <svg-icon icon-class="import-export" style="width: 20px; height: 20px" />{{ $t('common.import') }} / {{ $t('common.export') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--            <el-dropdown-item command="batch">-->
<!--              <div class="flex items-center">-->
<!--                <svg-icon icon-class="batch" class-name="mr-[5]" style="width: 16px; height: 16px" />{{ $t('flyparam.batch') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--            <el-dropdown-item command="document">-->
<!--              <div class="flex items-center">-->
<!--                <i class="el-icon-document" />-->
<!--                {{ $t('flyparam.document') }}-->
<!--              </div>-->
<!--            </el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--      </div>-->
<!--    </div>-->
<!--    <el-row type="flex" class="flyparameter-design-row">-->
<!--      <el-col v-if="mode === 1" :span="4" class="bg-white">-->
<!--        <div class="sidebar" style="height: calc(100vh - 104px)">-->
<!--          <div class="sidebar-table" style="height: 50%">-->
<!--            <div class="sidebar-title">-->
<!--              <span>{{ $t('flyparam.table') }}</span>-->
<!--            </div>-->
<!--            <div class="sidebar-body">-->
<!--              <el-tree-->
<!--                ref="tableTree"-->
<!--                :data="tables"-->
<!--                node-key="id"-->
<!--                :expand-on-click-node="false"-->
<!--                default-expand-all-->
<!--                :props="defaultProps"-->
<!--                @node-click="newTab"-->
<!--              >-->
<!--                <div slot-scope="{ node, data }" class="w-full">-->
<!--                  <div class="flex justify-between items-center w-full pr-3" :class="{'tree-node-active': currentTab && (data.id === currentTab.id)}">-->
<!--                    <span v-ellipsis class="inline-block" style="width: 120px">-->
<!--                      <svg-icon-->
<!--                        :icon-class="_treeIconClass(data)"-->
<!--                        class-name="mr-2"-->
<!--                        @click="expandTreeNode(data.id)"-->
<!--                      />-->
<!--                      {{ data.name }}-->
<!--                    </span>-->
<!--                    <i-->
<!--                      v-if="data.children"-->
<!--                      class="el-icon-plus icon-plus"-->
<!--                      @click.stop="() => (newTableVisible = true)"-->
<!--                    />-->
<!--                    <el-dropdown-->
<!--                      v-else-->
<!--                      placement="bottom-start"-->
<!--                      @command="-->
<!--                        (command) => handleTableDropdownCommand(command, data)-->
<!--                      "-->
<!--                    >-->
<!--                      <svg-icon icon-class="menu_3" />-->
<!--                      <el-dropdown-menu slot="dropdown">-->
<!--                        <el-dropdown-item command="delete" icon="el-icon-delete">-->
<!--                          <span>{{ $t('common.delete') }}</span>-->
<!--                        </el-dropdown-item>-->
<!--                        <el-dropdown-item command="rename" icon="el-icon-edit">-->
<!--                          <span>{{ $t('flyparam.rename') }}</span>-->
<!--                        </el-dropdown-item>-->
<!--                      </el-dropdown-menu>-->
<!--                    </el-dropdown>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </el-tree>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="sidebar-components" style="height: 50%">-->
<!--            <div class="sidebar-title">-->
<!--              <span>{{ $t('flyparam.components') }}</span>-->
<!--            </div>-->
<!--            <div class="sidebar-body">-->
<!--              <el-dropdown-->
<!--                v-if="activeComponentTab === 'custom'"-->
<!--                class="components-dropdown"-->
<!--                @command="handleCommand"-->
<!--              >-->
<!--                <span class="inline-block">-->
<!--                  <svg-icon icon-class="menu" class-name="components-menu" />-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                  <el-dropdown-item command="new" icon="el-icon-plus">-->
<!--                    <span>{{ $t('flyparam.new_component') }}</span>-->
<!--                  </el-dropdown-item>-->
<!--                  <el-dropdown-item command="import/export">-->
<!--                    <svg-icon-->
<!--                      icon-class="import-export"-->
<!--                      style="width: 22px; height: 22px; margin-left: -3px"-->
<!--                    />-->
<!--                    <span>{{ $t('common.import') }} / {{ $t('common.export') }}</span>-->
<!--                  </el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </el-dropdown>-->

<!--              <el-tabs v-model="activeComponentTab">-->
<!--                <el-tab-pane :label="$t('flyparam.basic')" name="basic">-->
<!--                  <ul class="basic-components">-->
<!--                    <li v-for="item in basicComponents" :key="item.id">-->
<!--                      <span class="basic-component__label">-->
<!--                        <img-->
<!--                          v-if="item.valueType === types.STRING"-->
<!--                          src="~@/icons/svg/parameter/string.png"-->
<!--                          alt-->
<!--                        >-->
<!--                        <img-->
<!--                          v-else-if="item.valueType === types.BOOLEAN"-->
<!--                          src="~@/icons/svg/parameter/boolean.png"-->
<!--                          alt-->
<!--                        >-->
<!--                        <img-->
<!--                          v-else-if="item.valueType === types.NUMBER"-->
<!--                          src="~@/icons/svg/parameter/number.png"-->
<!--                          alt-->
<!--                        >-->
<!--                        <img-->
<!--                          v-else-if="item.valueType === types.HEX"-->
<!--                          src="~@/icons/svg/parameter/hex.png"-->
<!--                          alt-->
<!--                        >-->
<!--                        <img-->
<!--                          v-else-if="item.valueType === types.FILE"-->
<!--                          src="~@/icons/svg/parameter/file.png"-->
<!--                          alt-->
<!--                        >-->
<!--                        <img-->
<!--                          v-else-if="item.valueType === types.REFERENCE"-->
<!--                          src="~@/icons/svg/parameter/link.png"-->
<!--                          alt-->
<!--                        >-->
<!--                        <img-->
<!--                          v-else-if="item.type === 2"-->
<!--                          src="~@/icons/svg/parameter/divider.png"-->
<!--                          style="width: 18px"-->
<!--                          alt-->
<!--                        >-->
<!--                        <i-->
<!--                          v-else-if="item.valueType === types.TIME"-->
<!--                          style="font-size: 1.2em"-->
<!--                          class="el-icon-alarm-clock"-->
<!--                        />-->
<!--                        <i-->
<!--                          v-else-if="item.valueType === types.DATE"-->
<!--                          style="font-size: 1.2em"-->
<!--                          class="el-icon-date"-->
<!--                        />-->
<!--                        <i v-else class="el-icon-time" style="font-size: 1.2em" />-->
<!--                        {{ item.label }}-->
<!--                      </span>-->
<!--                      <i class="el-icon-plus icon-plus" @click="() => addItem(item)" />-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane :label="$t('flyparam.custom')" name="custom">-->
<!--                  <el-tree :data="commonComponents" default-expand-all>-->
<!--                    <div slot-scope="{ node, data }" class="w-full">-->
<!--                      <div class="flex justify-between items-center w-full pr-3">-->
<!--                        <span v-ellipsis class="inline-block" style="width: 120px">-->
<!--                          <template v-if="data.children">-->
<!--                            <img src="~@/icons/svg/parameter/category.png" alt>-->
<!--                          </template>-->
<!--                          <template v-else>-->
<!--                            <img-->
<!--                              v-if="data.valueType === types.STRING"-->
<!--                              src="~@/icons/svg/parameter/string.png"-->
<!--                              alt-->
<!--                            >-->
<!--                            <img-->
<!--                              v-else-if="data.valueType === types.BOOLEAN"-->
<!--                              src="~@/icons/svg/parameter/boolean.png"-->
<!--                              alt-->
<!--                            >-->
<!--                            <img-->
<!--                              v-else-if="data.valueType === types.NUMBER"-->
<!--                              src="~@/icons/svg/parameter/number.png"-->
<!--                              alt-->
<!--                            >-->
<!--                            <img-->
<!--                              v-else-if="data.valueType === types.HEX"-->
<!--                              src="~@/icons/svg/parameter/hex.png"-->
<!--                              alt-->
<!--                            >-->
<!--                            <img-->
<!--                              v-else-if="data.valueType === types.FILE"-->
<!--                              src="~@/icons/svg/parameter/file.png"-->
<!--                              alt-->
<!--                            >-->
<!--                            <img-->
<!--                              v-else-if="data.valueType === types.REFERENCE"-->
<!--                              src="~@/icons/svg/parameter/link.png"-->
<!--                              alt-->
<!--                            >-->
<!--                          </template>-->
<!--                          {{ node.label }}-->
<!--                        </span>-->
<!--                        <div class="flex items-center">-->
<!--                          <i-->
<!--                            v-if="!data.children"-->
<!--                            class="el-icon-plus icon-plus"-->
<!--                            @click.stop="() => addItem(data)"-->
<!--                          />-->
<!--                          <div class="inline-block">-->
<!--                            <el-dropdown-->
<!--                              v-if="!data.children"-->
<!--                              @command="-->
<!--                                (command) =>-->
<!--                                  handleComponentCommand(command, data)-->
<!--                              "-->
<!--                            >-->
<!--                              <span class="inline-block">-->
<!--                                <svg-icon icon-class="menu" class-name="components-menu" />-->
<!--                              </span>-->
<!--                              <el-dropdown-menu slot="dropdown">-->
<!--                                <el-dropdown-item command="edit" icon="el-icon-edit">-->
<!--                                  <span>{{ $t('common.edit') }}</span>-->
<!--                                </el-dropdown-item>-->
<!--                                <el-dropdown-item command="remove" icon="el-icon-delete">-->
<!--                                  <span>{{ $t('common.delete') }}</span>-->
<!--                                </el-dropdown-item>-->
<!--                              </el-dropdown-menu>-->
<!--                            </el-dropdown>-->
<!--                            &lt;!&ndash; <svg-icon-->
<!--                            icon-class="edit"-->
<!--                            v-if="!data.children"-->
<!--                            class-name="mr-2"-->
<!--                            @click.stop="() => editCommonComponent(data)"-->
<!--                          />-->
<!--                          <svg-icon-->
<!--                            icon-class="delete"-->
<!--                            v-if="!data.children"-->
<!--                            @click.stop="() => removeCommonComponent(data.componentId)"-->
<!--                            />&ndash;&gt;-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      &lt;!&ndash; <div-->
<!--                        @drag="drag"-->
<!--                        @dragend="dragend"-->
<!--                        unselectable="on"-->
<!--                        draggable="true"-->
<!--                      >{{node.label}}</div>&ndash;&gt;-->
<!--                    </div>-->
<!--                  </el-tree>-->
<!--                </el-tab-pane>-->
<!--              </el-tabs>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col v-loading="layoutLoading" :span="mode === 1 ? 20 : 24" class="main-content">-->
<!--        <div v-show="currentLayout" class="param-button-group">-->
<!--          <button-->
<!--            v-if="tableType !== 3"-->
<!--            :class="{ active: page === 'Design' }"-->
<!--            @click="() => (page = 'Design')"-->
<!--          >{{ $t('flyparam.tab_design') }}</button>-->
<!--          <button-->
<!--            v-if="tableType !== 3"-->
<!--            :class="{ active: page === 'ParamList' }"-->
<!--            @click="() => (page = 'ParamList')"-->
<!--          >{{ $t('flyparam.tab_param') }}</button>-->
<!--          <button-->
<!--            v-if="!isProfile && tableType !== 1"-->
<!--            :class="{ active: page === 'EntryList' }"-->
<!--            @click="handleEntryListOnClick"-->
<!--          >{{ $t('flyparam.tab_entity') }}</button>-->
<!--        </div>-->
<!--        <el-tabs-->
<!--          v-model="currentTabId"-->
<!--          :addable="false"-->
<!--          type="border-card"-->
<!--          @tab-click="handleTabClick"-->
<!--          @tab-remove="handleTabRemove"-->
<!--        >-->
<!--          <el-tab-pane-->
<!--            v-for="tab in tabs"-->
<!--            :key="tab.id"-->
<!--            :label="-->
<!--              tab.positionChanged || tab.paramSchemaDesignChange-->
<!--                ? '* ' + tab.name-->
<!--                : tab.name-->
<!--            "-->
<!--            :name="tab.id"-->
<!--            :closable="tab.name !== 'Profile'"-->
<!--          >-->
<!--            <el-card-->
<!--              shadow="never"-->
<!--              style="margin: 10px 0 0 0"-->
<!--              class="parameter-layout"-->
<!--              :body-style="{ padding: '0px' }"-->
<!--            >-->
<!--              <keep-alive>-->
<!--                <el-row v-if="page === 'Design'" type="flex">-->
<!--                  <el-col :span="18" class="main-content__left">-->
<!--                    <div id="content">-->
<!--                      <el-form :id="tab.id" ref="layoutForm" :model="tab.form">-->
<!--                        <grid-layout-->
<!--                          :key="tab.randomKey"-->
<!--                          ref="gridlayout"-->
<!--                          :layout.sync="tab.data"-->
<!--                          :col-num="colNumber"-->
<!--                          :row-height="28"-->
<!--                          :is-draggable="true"-->
<!--                          :is-mirrored="false"-->
<!--                          :margin="[5, 10]"-->
<!--                          :use-css-transforms="true"-->
<!--                          @layout-updated="layoutUpdatedEvent"-->
<!--                          @layout-ready="layoutReadyEvent"-->
<!--                        >-->
<!--                          <grid-item-->
<!--                            v-for="item in tab.data"-->
<!--                            :key="item.i"-->
<!--                            drag-ignore-from=".el-input__inner, .el-textarea__inner, .el-select, .el-input, .parameter-reference, .el-checkbox, .parameter-boolean"-->
<!--                            style="touch-action: none"-->
<!--                            :static="item.i === 'new'"-->
<!--                            :x="item.x"-->
<!--                            :y="item.y"-->
<!--                            :w="item.w"-->
<!--                            :h="item.h"-->
<!--                            :i="item.i"-->
<!--                          >-->
<!--                            <div-->
<!--                              v-if="item.i === 'new'"-->
<!--                              class="parameter-card text-center new-param"-->
<!--                              @click="addItem"-->
<!--                            >-->
<!--                              <span class="inline-block" style="line-height: 62px">{{ $t('flyparam.new_param') }}</span>-->
<!--                            </div>-->
<!--                            <parameter-->
<!--                              v-else-->
<!--                              has-border-->
<!--                              :reference-disabled="refTableType !== 2"-->
<!--                              design-->
<!--                              :reference-values="-->
<!--                                currentItem && currentItem.referenceValues-->
<!--                              "-->
<!--                              :item="item"-->
<!--                              :form="tab.form"-->
<!--                              :active-id="activeId"-->
<!--                              @click.native="() => (activeId = item.i)"-->
<!--                              @close="removeItem"-->
<!--                              @select-file="(id) => handleSelectFile(id)"-->
<!--                              @select-reference="-->
<!--                                (id) => handleSelectReference(id)-->
<!--                              "-->
<!--                              @newTab="(id) => handleReferenceTableClick(id)"-->
<!--                            />-->
<!--                          </grid-item>-->
<!--                          &lt;!&ndash; <grid-item-->
<!--                          v-if="mode === 2"-->
<!--                          :is-static="true"-->
<!--                          :is-draggable="false"-->
<!--                          :h="2"-->
<!--                          :w="1"-->
<!--                          :is-resizable="false"-->
<!--                          :x="xPosition"-->
<!--                          :y="yPosition * 2"-->
<!--                          i="new"-->
<!--                        >-->
<!--                          <div class="parameter-card text-center new-param" @click="addItem">-->
<!--                            <span class="inline-block" style="line-height: 62px;">New Param</span>-->
<!--                          </div>-->
<!--                          </grid-item>&ndash;&gt;-->
<!--                        </grid-layout>-->
<!--                      </el-form>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  &lt;!&ndash;Param Properties &ndash;&gt;-->
<!--                  <el-col :span="6" class="param-properties">-->
<!--                    <div class="param-properties__title">{{ $t('flyparam.properties') }}</div>-->
<!--                    <div class="main-content__right">-->
<!--                      <el-form-->
<!--                        v-if="currentItem"-->
<!--                        ref="prorpertiesForm"-->
<!--                        size="small"-->
<!--                        :rules="rules"-->
<!--                        :model="currentItem"-->
<!--                      >-->
<!--                        <div v-if="currentItem.type === 2">-->
<!--                          <el-form-item :label="$t('flyparam.title')">-->
<!--                            <el-input v-model="currentItem.title" size="small" />-->
<!--                          </el-form-item>-->
<!--                        </div>-->
<!--                        <div v-else>-->
<!--                          <el-form-item :label="$t('flyparam.param_label')" prop="label">-->
<!--                            <el-input v-model="currentItem.label" size="small" maxlength="64" />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item :label="$t('flyparam.param_key')" prop="key">-->
<!--                            <el-input v-model="currentItem.key" size="small" maxlength="64" />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item :label="$t('flyparam.param_type')" prop="valueType">-->
<!--                            <el-select-->
<!--                              v-model="currentItem.valueType"-->
<!--                              size="small"-->
<!--                              @change="handleValueTypeChange"-->
<!--                            >-->
<!--                              <el-option label="String" :value="types.STRING" />-->
<!--                              <el-option label="Number" :value="types.NUMBER" />-->
<!--                              <el-option label="Hex" :value="types.HEX" />-->
<!--                              <el-option label="Boolean" :value="types.BOOLEAN" />-->
<!--                              <el-option label="File" :value="types.FILE" />-->
<!--                              <el-option-->
<!--                                v-if="mode === 1"-->
<!--                                label="Reference"-->
<!--                                :value="types.REFERENCE"-->
<!--                              />-->
<!--                              <el-option label="Time" :value="types.TIME" />-->
<!--                              <el-option label="Date" :value="types.DATE" />-->
<!--                              <el-option label="DateTime" :value="types.DATETIME" />-->
<!--                            </el-select>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-if="currentItem.valueType === types.REFERENCE"-->
<!--                            :label="$t('flyparam.reference_table')"-->
<!--                            prop="table"-->
<!--                          >-->
<!--                            <div class="flex items-center">-->
<!--                              <el-select-->
<!--                                v-model="currentItem.table"-->
<!--                                class="el-select__reference"-->
<!--                                size="small"-->
<!--                                value-key="id"-->
<!--                                :loading="selectLoading"-->
<!--                                @visible-change="selectTableVisibleChange"-->
<!--                                @change="currentItem.defaultValues = []"-->
<!--                              >-->
<!--                                <el-option-->
<!--                                  v-for="item in (currentTab &&-->
<!--                                    currentTab.referenceTable) ||-->
<!--                                    []"-->
<!--                                  :key="item.id"-->
<!--                                  :value="{-->
<!--                                    id: item.id,-->
<!--                                    tableType: item.tableType-->
<!--                                  }"-->
<!--                                  :label="item.name"-->
<!--                                >-->
<!--                                  <svg-icon :icon-class="_treeIconClass(item)" class-name="mr-2" />-->
<!--                                  <span>{{ item.name }}</span>-->
<!--                                </el-option>-->
<!--                              </el-select>-->
<!--                              <div class="el-select-append">-->
<!--                                <button-->
<!--                                  type="button"-->
<!--                                  class="el-button el-button&#45;&#45;default"-->
<!--                                  @click="() => handleReferenceTableClick()"-->
<!--                                >-->
<!--                                  <i class="el-icon-position" />-->
<!--                                </button>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-if="-->
<!--                              [types.TIME, types.DATE, types.DATETIME].includes(-->
<!--                                currentItem.valueType-->
<!--                              )-->
<!--                            "-->
<!--                            :label="$t('flyparam.date_formatter')"-->
<!--                          >-->
<!--                            <el-select v-model="currentItem.formatter" size="small">-->
<!--                              <div v-if="currentItem.valueType === types.TIME">-->
<!--                                <el-option label="HH:mm:ss" value="HH:mm:ss" />-->
<!--                              </div>-->
<!--                              <div-->
<!--                                v-else-if="-->
<!--                                  currentItem.valueType === types.DATETIME-->
<!--                                "-->
<!--                              >-->
<!--                                <el-option label="MM/dd/yyyy HH:mm:ss" value="MM/dd/yyyy HH:mm:ss" />-->
<!--                                <el-option label="dd/MM/yyyy HH:mm:ss" value="dd/MM/yyyy HH:mm:ss" />-->
<!--                                <el-option label="yyyy/MM/dd HH:mm:ss" value="yyyy/MM/dd HH:mm:ss" />-->
<!--                                <el-option label="YYYY-MM-dd HH:mm:ss" value="YYYY-MM-dd HH:mm:ss" />-->
<!--                              </div>-->
<!--                              <div v-else-if="currentItem.valueType === types.DATE">-->
<!--                                <el-option label="MM/dd/yyyy" value="MM/dd/yyyy" />-->
<!--                                <el-option label="dd/MM/yyyy" value="dd/MM/yyyy" />-->
<!--                                <el-option label="yyyy/MM/dd" value="yyyy/MM/dd" />-->
<!--                                <el-option label="YYYY-MM-dd" value="YYYY-MM-dd" />-->
<!--                              </div>-->
<!--                            </el-select>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-if="!(currentItem.valueType === types.REFERENCE && currentItem.table.tableType === 1)"-->
<!--                            :label="$t('flyparam.default_value')"-->
<!--                          >-->
<!--                            <div v-if="currentItem.valueType === types.BOOLEAN">-->
<!--                              <el-radio v-model="currentItem.defaultValues" :label="true">{{ $t('flyparam.true_option') }}</el-radio>-->
<!--                              <el-radio v-model="currentItem.defaultValues" :label="false">{{ $t('flyparam.false_option') }}</el-radio>-->
<!--                            </div>-->
<!--                            <div-->
<!--                              v-else-if="-->
<!--                                currentItem.valueType === types.REFERENCE-->
<!--                              "-->
<!--                            >-->
<!--                              <div v-if="currentItem.table && currentItem.table.tableType === 2" class="flex items-center">-->
<!--                                <el-select-->
<!--                                  v-model="currentItem.defaultValues"-->
<!--                                  class="el-select__reference"-->
<!--                                  multiple-->
<!--                                  disabled-->
<!--                                  :multiple-limit="currentItem.maxLength"-->
<!--                                  collapse-tags-->
<!--                                  size="small"-->
<!--                                >-->
<!--                                  <el-option v-for="item in currentItem.referenceValues" :key="item" :label="item" :value="item" />-->
<!--                                </el-select>-->
<!--                                <div class="el-select-append">-->
<!--                                  <button-->
<!--                                    type="button"-->
<!--                                    class="el-button"-->
<!--                                    @click="handleSelectReference(currentItem)"-->
<!--                                  >{{ $t('flyparam.select') }}</button>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                              <el-select-->
<!--                                v-else-->
<!--                                v-model="currentItem.defaultValues"-->
<!--                                multiple-->
<!--                                :disabled="refTableType !== 3"-->
<!--                                @click.native="-->
<!--                                  handleSelectReference(currentItem)-->
<!--                                "-->
<!--                              >-->
<!--                                <el-option-->
<!--                                  v-for="item in currentItem.referenceValues"-->
<!--                                  :key="item"-->
<!--                                  :label="item"-->
<!--                                  :value="item"-->
<!--                                />-->
<!--                              </el-select>-->
<!--                            </div>-->
<!--                            <div v-else-if="currentItem.valueType === types.FILE">-->
<!--                              <div v-ellipsis>-->
<!--                                <span>{{ currentItem.defaultValues }}</span>-->
<!--                              </div>-->
<!--                              <el-button size="small" @click="handleSelectFile(activeId)">{{ $t('flyparam.select_file') }}</el-button>-->
<!--                            </div>-->
<!--                            <el-input-->
<!--                              v-else-if="currentItem.valueType === types.NUMBER"-->
<!--                              v-model="currentItem.defaultValues"-->
<!--                              size="small"-->
<!--                              :placeholder="currentItem.defaultValues"-->
<!--                              @input="-->
<!--                                (val) =>-->
<!--                                  handleNumberInputChange(val, currentItem)-->
<!--                              "-->
<!--                            />-->
<!--                            <el-input-->
<!--                              v-else-if="currentItem.valueType === types.HEX"-->
<!--                              v-model="currentItem.defaultValues"-->
<!--                              size="small"-->
<!--                              :placeholder="currentItem.defaultValues"-->
<!--                              @input="-->
<!--                                (val) => handleHexInputChange(val, currentItem)-->
<!--                              "-->
<!--                            />-->
<!--                            <el-date-picker-->
<!--                              v-else-if="currentItem.valueType === types.DATE"-->
<!--                              v-model="currentItem.defaultValues"-->
<!--                              type="date"-->
<!--                              :format="currentItem.formatter"-->
<!--                              :value-format="currentItem.formatter"-->
<!--                              :placeholder="$t('flyparam.choose_time_tip')"-->
<!--                              size="small"-->
<!--                              style="width: 100%"-->
<!--                            />-->

<!--                            <el-date-picker-->
<!--                              v-else-if="-->
<!--                                currentItem.valueType === types.DATETIME-->
<!--                              "-->
<!--                              v-model="currentItem.defaultValues"-->
<!--                              type="datetime"-->
<!--                              :format="currentItem.formatter"-->
<!--                              :value-format="currentItem.formatter"-->
<!--                              :placeholder="$t('flyparam.choose_time_tip')"-->
<!--                              size="small"-->
<!--                              style="width: 100%"-->
<!--                            />-->
<!--                            <el-time-picker-->
<!--                              v-else-if="currentItem.valueType === types.TIME"-->
<!--                              v-model="currentItem.defaultValues"-->
<!--                              :format="currentItem.formatter"-->
<!--                              :value-format="currentItem.formatter"-->
<!--                              :placeholder="$t('flyparam.choose_time_tip')"-->
<!--                              size="small"-->
<!--                              style="width: 100%"-->
<!--                            />-->
<!--                            <el-input-->
<!--                              v-else-->
<!--                              v-model="currentItem.defaultValues"-->
<!--                              :value="currentItem.defaultValues"-->
<!--                              size="small"-->
<!--                              :maxlength="currentItem.maxLength"-->
<!--                              @input="-->
<!--                                (val) => handleStringInput(val, currentItem)-->
<!--                              "-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-if="currentItem.valueType === types.REFERENCE && currentItem.table.tableType !== 1"-->
<!--                            :label="$t('flyparam.max_ref_number')"-->
<!--                            prop="maxLength"-->
<!--                          >-->
<!--                            <el-input-->
<!--                              v-model.number="currentItem.maxLength"-->
<!--                              size="small"-->
<!--                              type="number"-->
<!--                              max="20"-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-else-if="currentItem.valueType === types.HEX"-->
<!--                            :rules="[{validator: validateMaxLength, maxLength: 2048, trigger: 'change' }]"-->
<!--                            :label="$t('flyparam.max_length')"-->
<!--                            prop="maxLength"-->
<!--                          >-->
<!--                            <el-input-->
<!--                              v-model.number="currentItem.maxLength"-->
<!--                              size="small"-->
<!--                              type="number"-->
<!--                              max="2048"-->
<!--                              @input="-->
<!--                                (val) =>-->
<!--                                  handleHexMaxLengthInput(val, currentItem)-->
<!--                              "-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-else-if="currentItem.valueType === types.NUMBER"-->
<!--                            :rules="[{validator: validateMaxLength, maxLength: Number.MAX_SAFE_INTEGER, trigger: 'change' }]"-->
<!--                            :label="$t('flyparam.max_value')"-->
<!--                            prop="maxLength"-->
<!--                          >-->
<!--                            <el-input-->
<!--                              v-model.number="currentItem.maxLength"-->
<!--                              size="small"-->
<!--                              type="number"-->
<!--                              :max="Number.MAX_SAFE_INTEGER"-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-else-if="-->
<!--                              ![-->
<!--                                types.BOOLEAN,-->
<!--                                types.FILE,-->
<!--                                types.TIME,-->
<!--                                types.DATE,-->
<!--                                types.DATETIME-->
<!--                              ].includes(currentItem.valueType)-->
<!--                                &&-->
<!--                                !(currentItem.valueType === types.REFERENCE && currentItem.table.tableType === 1)"-->
<!--                            :rules="[{validator: validateMaxLength, maxLength: 255, trigger: 'change' }]"-->
<!--                            :label="$t('flyparam.max_length')"-->
<!--                            prop="maxLength"-->
<!--                          >-->
<!--                            <el-input-->
<!--                              v-model.number="currentItem.maxLength"-->
<!--                              size="small"-->
<!--                              type="number"-->
<!--                              max="255"-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item-->
<!--                            v-if="(currentItem.valueType !== types.BOOLEAN) && !(currentItem.valueType === types.REFERENCE && currentItem.table.tableType === 1)"-->
<!--                            :label="$t('flyparam.param_require')"-->
<!--                          >-->
<!--                            <el-switch-->
<!--                              v-model="currentItem.nullable"-->
<!--                              :active-value="0"-->
<!--                              :inactive-value="1"-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                          <el-form-item :label="$t('common.description')">-->
<!--                            <el-input-->
<!--                              v-model="currentItem.description"-->
<!--                              type="textarea"-->
<!--                              max="255"-->
<!--                              :autosize="{ minRows: 3, maxRows: 8 }"-->
<!--                            />-->
<!--                          </el-form-item>-->
<!--                        </div>-->
<!--                      </el-form>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--                <param-list-->
<!--                  v-else-if="page === 'ParamList'"-->
<!--                  ref="paramList"-->
<!--                  :tab="currentTab"-->
<!--                  :reference-tables="currentTab && currentTab.referenceTable"-->
<!--                  :table-data="-->
<!--                    currentLayout.filter((v) => v.i !== 'new' && v.type === 1)-->
<!--                  "-->
<!--                  :table-id="currentTabId"-->
<!--                  :template-id="templateId"-->
<!--                  :mode="mode"-->
<!--                />-->
<!--                <entry-list-->
<!--                  v-else-if="page === 'EntryList'"-->
<!--                  ref="entryList"-->
<!--                  :table-id="currentTabId"-->
<!--                  :app-name="innerAppName"-->
<!--                  :sn="currentTab.name"-->
<!--                  :table-type="tableType"-->
<!--                  :reference-table="currentTab && currentTab.referenceTable"-->
<!--                  :template-id="templateId"-->
<!--                />-->
<!--              </keep-alive>-->
<!--            </el-card>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <common-component-dialog-->
<!--      v-model="newComponentVisible"-->
<!--      :component="comoponentDialogData"-->
<!--      :operation-type="newComponentDialogType"-->
<!--      @confirm="fetchCommonComponents"-->
<!--    />-->
<!--    <upload-file-->
<!--      v-model="uploadFileVisible"-->
<!--      :current-item="currentItem"-->
<!--      @confirm="(filePath) => handleFileUploadConfirm(filePath)"-->
<!--    />-->
<!--    <new-table-->
<!--      v-model="newTableVisible"-->
<!--      :template-id="templateId"-->
<!--      @confirm="(tableName) => handleNewTable(tableName)"-->
<!--    />-->
<!--    <select-reference-->
<!--      v-if="currentItem"-->
<!--      :current-item="currentItem"-->
<!--      :template-id="templateId"-->
<!--      v-model="selectReferenceVisible"-->
<!--      :table-id="currentItem.table && currentItem.table.id"-->
<!--    />-->
<!--    <preview-drawer-->
<!--      ref="previewDrawer"-->
<!--      size="60%"-->
<!--      v-model="jsonDrawerVisible"-->
<!--      :content="jsonStr"-->
<!--      :file-type="previewDrawerFileType"-->
<!--      :loading="previewDrawerLoading"-->
<!--      @refresh="(fileType) => previewTemplate(fileType)"-->
<!--    />-->
<!--    <rename-dialog-->
<!--      v-model="renameDialogVisible"-->
<!--      :table-id="renameId"-->
<!--      :table-name="renameName"-->
<!--      @save="fetchTemplateTableList"-->
<!--    />-->
<!--    <import-export-dialog-->
<!--      :template-id="templateId"-->
<!--      :param-template-id="paramTemplateId"-->
<!--      v-model="importExportVisible"-->
<!--      :tree-data="tables"-->
<!--      :table-type="tableType"-->
<!--      :table-id="tableId"-->
<!--    />-->
<!--    <component-import-->
<!--      v-model="componentImportVisible"-->
<!--      :tree-data="commonComponents"-->
<!--      @confirm="fetchCommonComponents"-->
<!--    />-->
<!--    <layout-preview-->
<!--      :table-id="refTableId"-->
<!--      v-model="layoutPreviewVisible"-->
<!--      :template-id="templateId"-->
<!--    />-->
<!--    <undo-dialog v-model="undoDialogVisible" @confirm="(type) => undo(type)" />-->
<!--    <redesign-dialog-->
<!--      :template-id="paramTemplateId"-->
<!--      v-model="redesignDialogVisible"-->
<!--      @confirm="handleRedesignConfirm"-->
<!--    />-->
<!--    <new-reference-dialog-->
<!--      :template-id="templateId"-->
<!--      :table-id="currentTab && currentTab.id"-->
<!--      v-model="newReferenceDialogVisible"-->
<!--      :component="selectedReferenceComponent"-->
<!--      @update-table="(tableId) => { fetchTemplateTableList(); fetchReferenceTable(tableId);}"-->
<!--      @confirm="(table, tableId) => handleNewReference(table, tableId)"-->
<!--    />-->

<!--    <el-dialog-->
<!--      :title="$t('flyparam.page_preview')"-->
<!--      v-model="configPreviewDialogVisible"-->
<!--      width="80%"-->
<!--    >-->
<!--      <configuration-preview-->
<!--        :key="configurationPreviewKey"-->
<!--        :info="this.tables[0]"-->
<!--        :layout="this.currentTab && this.currentTab.data"-->
<!--      />-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import VueGridLayout from 'vue-grid-layout'-->
<!--import Parameter from '../components/parameter'-->
<!--import ParamList from '../components/param-list'-->
<!--import EntryList from '../components/entry-list'-->
<!--import UploadFile from '../components/upload-file'-->
<!--import SelectReference from '../components/select-reference'-->
<!--import CommonComponentDialog from '../components/common-components-dialog'-->
<!--import UndoDialog from '../components/undo-dialog.vue'-->
<!--import NewReferenceDialog from '../components/new-refence-dialog.vue'-->
<!--import LayoutPreview from '../components/layout-preview.vue'-->
<!--import PreviewDrawer from '../components/preview-drawer'-->
<!--import RenameDialog from '../components/rename-dialog'-->
<!--import RedesignDialog from '../components/redesign-dialog'-->
<!--import ImportExportDialog from '../components/import-export-dialog.vue'-->
<!--import ComponentImport from '../components/component-import-export.vue'-->
<!--import base64 from '@/utils/base64'-->
<!--import { types } from '../type'-->
<!--import { uuidv4, deepClone } from '@/utils'-->
<!--import { rules, layoutRules } from '../rules'-->
<!--import { validateNumber, validateMaxLength } from '../validate'-->
<!--import { treeIconClass } from '../helper'-->
<!--import {-->
<!--  getParameterTemplateInfo,-->
<!--  getTemplateTableLayoutList,-->
<!--  getTemplateTableList,-->
<!--  saveTemplateLayout,-->
<!--  getBasicComponent,-->
<!--  getReferenceTable,-->
<!--  getCommonComponentList,-->
<!--  deleteCommonComponent,-->
<!--  getParameterTemplatePreview,-->
<!--  deleteTable,-->
<!--  getReferenceEntryRecord,-->
<!--  getParameterTemplateInfoByPackageName,-->
<!--  createBlankTemplate,-->
<!--  runBatch-->
<!--} from '@/api/parameter'-->
<!--import NewTable from '../components/new-table'-->
<!--import ConfigurationPreview from '../components/configuration-preview.vue'-->

<!--var formatXml = require('xml-formatter')-->
<!--const watchers = []-->

<!--const generateLayoutData = function(item, referenceTables) {-->
<!--  let table-->
<!--  if (item.valueType === 5) {-->
<!--    const refTable = referenceTables.find(-->
<!--      (table) => table.id === item.refTableSchemaId-->
<!--    )-->
<!--    if (refTable) {-->
<!--      table = {-->
<!--        id: item.refTableSchemaId,-->
<!--        tableType: refTable.tableType-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  return {-->
<!--    ...item,-->
<!--    i: item.paramLayoutId,-->
<!--    title: item.title,-->
<!--    valueType: item.valueType,-->
<!--    type: item.type,-->
<!--    w: item.w,-->
<!--    y: item.y,-->
<!--    x: item.x,-->
<!--    h: item.h,-->
<!--    label: item.label,-->
<!--    table: table,-->
<!--    edit: false,-->
<!--    defaultValues:-->
<!--      item.valueType === this.types.REFERENCE-->
<!--        ? item.defaultValues.map((item) => (item ? item.name : ''))-->
<!--        : item.defaultValues && item.defaultValues.length === 1-->
<!--          ? item.defaultValues[0]-->
<!--          : ''-->
<!--  }-->
<!--}-->

<!--const mouseXY = { x: null, y: null }-->
<!--const DragPos = { x: null, y: null, w: 1, h: 1, i: null }-->

<!--const populateTabData = (arr, tabs, triggerPublish) => {-->
<!--  tabs.forEach((tab) => {-->
<!--    arr.push({-->
<!--      triggerPublish,-->
<!--      paramSchemaDesignChange: tab.paramSchemaDesignChange,-->
<!--      tableId: tab.id,-->
<!--      parameters: tab.data-->
<!--        .filter((item) => item.i !== 'new')-->
<!--        .map((item) => {-->
<!--          const defaultValues = []-->
<!--          if (item.defaultValues || item.defaultValues === 0) {-->
<!--            if (Array.isArray(item.defaultValues)) {-->
<!--              return {-->
<!--                ...item,-->
<!--                defaultValues: item.defaultValues,-->
<!--                refTableSchemaId: item.table ? item.table.id : ''-->
<!--              }-->
<!--            } else {-->
<!--              defaultValues.push(item.defaultValues)-->
<!--            }-->
<!--          }-->

<!--          return {-->
<!--            ...item,-->
<!--            defaultValues,-->
<!--            refTableSchemaId: item.table ? item.table.id : ''-->
<!--          }-->
<!--        })-->
<!--    })-->
<!--  })-->
<!--}-->

<!--export default {-->
<!--  components: {-->
<!--    GridLayout: VueGridLayout.GridLayout,-->
<!--    GridItem: VueGridLayout.GridItem,-->
<!--    Parameter,-->
<!--    ParamList,-->
<!--    EntryList,-->
<!--    NewTable,-->
<!--    UploadFile,-->
<!--    SelectReference,-->
<!--    CommonComponentDialog,-->
<!--    PreviewDrawer,-->
<!--    RenameDialog,-->
<!--    ImportExportDialog,-->
<!--    ComponentImport,-->
<!--    LayoutPreview,-->
<!--    UndoDialog,-->
<!--    RedesignDialog,-->
<!--    ConfigurationPreview,-->
<!--    NewReferenceDialog-->
<!--  },-->

<!--  props: {-->
<!--    paramTemplateId: {-->
<!--      type: String-->
<!--    },-->
<!--    appPackageName: {-->
<!--      type: String-->
<!--    },-->
<!--    appName: {-->
<!--      type: String-->
<!--    },-->
<!--    showBack: {-->
<!--      type: Boolean,-->
<!--      default: true-->
<!--    },-->
<!--    source: {-->
<!--      type: String,-->
<!--      default: ''-->
<!--    }-->
<!--  },-->

<!--  provide() {-->
<!--    return {-->
<!--      eventBus: null-->
<!--    }-->
<!--  },-->

<!--  data() {-->
<!--    var that = this-->
<!--    return {-->
<!--      innerAppName: '',-->
<!--      mode: 1,-->
<!--      activeId: '0',-->
<!--      currentTabId: '',-->
<!--      tabs: [],-->
<!--      draging: false,-->
<!--      page: 'Design',-->
<!--      newTableVisible: false,-->
<!--      selectedFileParameter: '',-->
<!--      uploadFileVisible: false,-->
<!--      selectReferenceVisible: false,-->
<!--      newReferenceDialogVisible: false,-->
<!--      jsonDrawerVisible: false,-->
<!--      componentImportVisible: false,-->
<!--      layoutLoading: false,-->
<!--      importExportVisible: false, // 导入导出窗口的隐藏/显示-->
<!--      layoutPreviewVisible: false,-->
<!--      renameDialogVisible: false,-->
<!--      undoDialogVisible: false,-->
<!--      redesignDialogVisible: false,-->
<!--      configPreviewDialogVisible: false,-->

<!--      // 通用组件相关-->
<!--      newComponentVisible: false,-->
<!--      newComponentDialogType: 'new',-->
<!--      comoponentDialogData: {}, // 需要更新的组件-->

<!--      currentLayout: [],-->
<!--      rules: rules.call(that),-->
<!--      layoutRules: layoutRules.call(that),-->
<!--      layout: [],-->
<!--      layoutMap: [],-->
<!--      tables: [],-->
<!--      selectedReferenceComponent: {},-->
<!--      referenceTable: [],-->
<!--      activeComponentTab: 'basic',-->
<!--      commonComponents: [],-->
<!--      basicComponents: [],-->
<!--      defaultProps: {-->
<!--        children: 'children',-->
<!--        label: 'name'-->
<!--      },-->
<!--      types,-->
<!--      selectLoading: false,-->
<!--      jsonStr: '', // 预览的json数据-->
<!--      previewDrawerFileType: 1,-->
<!--      previewDrawerLoading: false,-->
<!--      pushingData: false,-->
<!--      renameId: '',-->
<!--      templateId: this.$route.params.id || this.paramTemplateId || '',-->
<!--      renameName: '',-->
<!--      validateNumber,-->
<!--      randomKey: '',-->
<!--      configurationPreviewKey: '',-->
<!--      validateMaxLength: validateMaxLength.bind(this)-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    // 被选中的当前参数-->
<!--    currentItem() {-->
<!--      return this.currentLayout.find((item) => item.i === this.activeId)-->
<!--    },-->
<!--    // 模板是否有变动-->
<!--    changed() {-->
<!--      const tabs = this.tabs.filter(-->
<!--        (tab) =>-->
<!--          tab.tableType !== 3 &&-->
<!--          (tab.paramSchemaDesignChange || tab.positionChanged)-->
<!--      )-->
<!--      return tabs.length > 0-->
<!--    },-->
<!--    // table的类型，主要用于图标的处理-->
<!--    tableType() {-->
<!--      if (this.currentTab) {-->
<!--        return this.currentTab.tableType-->
<!--      } else {-->
<!--        return 1-->
<!--      }-->
<!--    },-->
<!--    tableId() {-->
<!--      return this.tables.length > 0 ? this.tables[0].id : ''-->
<!--    },-->
<!--    currentTab() {-->
<!--      return this.tabs.find((tab) => tab.id === this.currentTabId)-->
<!--    },-->
<!--    // 新增按钮（简单模式下）的x坐标-->
<!--    xPosition() {-->
<!--      return this.currentLayout.length === 0-->
<!--        ? 0-->
<!--        : (this.currentLayout.length - 1) % 2-->
<!--    },-->
<!--    // 新增按钮（简单模式下）的y坐标-->
<!--    yPosition() {-->
<!--      return this.currentLayout.length === 0 ? 0 : this.currentLayout.length + 2-->
<!--    },-->
<!--    // 每行有多少参数，简单模式下为2个-->
<!--    colNumber() {-->
<!--      if (this.mode === 1) {-->
<!--        return 3-->
<!--      } else {-->
<!--        return 2-->
<!--      }-->
<!--    },-->
<!--    // 当前选中的Table-->
<!--    currentTable() {-->
<!--      return this.tables.find((table) => table.id === this.currentTabId) || ''-->
<!--    },-->
<!--    isProfile() {-->
<!--      return this.currentTable && this.currentTable.name === 'Profile'-->
<!--    },-->
<!--    refTableType() {-->
<!--      if (this.currentItem && this.currentItem.table) {-->
<!--        return this.currentItem.table.tableType-->
<!--      }-->
<!--      return ''-->
<!--    },-->
<!--    refTableId() {-->
<!--      if (this.currentItem && this.currentItem.table) {-->
<!--        return this.currentItem.table.id-->
<!--      }-->
<!--      return ''-->
<!--    },-->
<!--    dataString() {-->
<!--      const arr = this.currentLayout-->
<!--        .filter((_) => _.i !== 'new')-->
<!--        .map((_) => ({-->
<!--          defaultValues: _.defaultValues,-->
<!--          label: _.label,-->
<!--          valueType: _.valueType,-->
<!--          maxLength: _.maxLength,-->
<!--          key: _.key,-->
<!--          table: _.table,-->
<!--          nullable: _.nullable-->
<!--        }))-->
<!--      return arr.length > 0 ? JSON.stringify(arr) : '[]'-->
<!--    },-->
<!--    positionString() {-->
<!--      const arr = this.currentLayout-->
<!--        .filter((_) => _.i !== 'new')-->
<!--        .map((_) => ({-->
<!--          x: _.x,-->
<!--          y: _.y,-->
<!--          w: _.w,-->
<!--          h: _.h-->
<!--        }))-->
<!--      return arr.length > 0 ? JSON.stringify(arr) : '[]'-->
<!--    },-->
<!--    from() {-->
<!--      return this.$route.query && this.$route.query.from-->
<!--    }-->
<!--  },-->
<!--  beforeRouteLeave(to, from, next) {-->
<!--    if (!this.from) {-->
<!--      this.$store.commit('app/REMOVE_KEEP_ALIVE_LIST', 'FlyParameter')-->
<!--    }-->
<!--    next()-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    watchers.forEach((unwatch) => unwatch())-->
<!--  },-->
<!--  mounted() {-->
<!--    if (this.appPackageName) {-->
<!--      this.fetchInfoByPackageName(this.appPackageName)-->
<!--    } else {-->
<!--      this.initTemplateConfigPage()-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    initTemplateConfigPage() {-->
<!--      this.fetchParameterTemplateInfo()-->
<!--      if (this.mode === 1) {-->
<!--        // 获取组件配置-->
<!--        this.fetchBasicComponent()-->
<!--        this.fetchCommonComponents()-->
<!--      } else if (this.mode === 2) {-->
<!--        // 简单模式下直接获取布局配置-->
<!--        this.fetchTemplateTableLayoutList()-->
<!--      }-->
<!--    },-->
<!--    async fetchInfoByPackageName(appPackageName) {-->
<!--      try {-->
<!--        const info = await getParameterTemplateInfoByPackageName(appPackageName)-->
<!--        this.templateId = info.id-->
<!--        if (info) {-->
<!--          this.initTemplateConfigPage()-->
<!--        } else {-->
<!--          const res = await createBlankTemplate({-->
<!--            mode: this.mode,-->
<!--            appName: this.appName,-->
<!--            appPackageName: appPackageName,-->
<!--            fileType: 1-->
<!--          })-->
<!--          this.templateId = res.id-->
<!--          this.initTemplateConfigPage()-->
<!--        }-->
<!--      } catch (err) {-->
<!--        if (err.message) {-->
<!--          this.$message.error(err.message)-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    back(cb) {-->
<!--      if (-->
<!--        this.tabs.filter(-->
<!--          (tab) => tab.paramSchemaDesignChange || tab.positionChanged-->
<!--        ).length > 0-->
<!--      ) {-->
<!--        this.$commonConfirm({-->
<!--          title: this.$t('page.tip'),-->
<!--          content: this.$t('flyparam.unsave'),-->
<!--          btnSureTitle: this.$t('flyparam.unsave_close'),-->
<!--          type: 'danger',-->
<!--          showIcon: false,-->
<!--          onConfirm: (instance, done) => {-->
<!--            if (cb) {-->
<!--              cb()-->
<!--            } else {-->
<!--              if (this.source === 'appUpload') {-->
<!--                this.$emit('back')-->
<!--              } else {-->
<!--                this.$router.push(-->
<!--                  this.from || `/vas/fly-parameter/index/${this.templateId}`-->
<!--                )-->
<!--              }-->
<!--            }-->
<!--            done()-->
<!--          }-->
<!--        })-->
<!--      } else {-->
<!--        if (cb) {-->
<!--          cb()-->
<!--        } else {-->
<!--          if (this.source === 'appUpload') {-->
<!--            this.$emit('back')-->
<!--          } else {-->
<!--            this.$router.push(-->
<!--              this.from || `/vas/fly-parameter/index/${this.templateId}`-->
<!--            )-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    _treeIconClass(data) {-->
<!--      return treeIconClass(data)-->
<!--    },-->

<!--    expandTreeNode(id) {-->
<!--      const node = this.$refs.tableTree.getNode(id)-->
<!--      node.expanded = !node.expanded-->
<!--    },-->
<!--    fetchParameterTemplateInfo() {-->
<!--      const loading = this.$loading({-->
<!--        lock: true,-->
<!--        text: 'Loading...',-->
<!--        spinner: 'el-icon-loading',-->
<!--        background: 'rgb(255, 255, 255)'-->
<!--      })-->
<!--      this.tables = []-->
<!--      this.tabs = []-->
<!--      getParameterTemplateInfo(this.templateId)-->
<!--        .then((data) => {-->
<!--          const id = data.entryId-->
<!--          this.tables.push({ ...data, id: data.entryId })-->
<!--          this.currentTabId = id-->
<!--          this.newTab({ ...data, id: data.entryId, name: 'Profile' })-->
<!--          this.innerAppName = data.appName-->
<!--          this.$store.commit('parameter/SET_TEMPLATE_INFO', data)-->
<!--          this.$store.commit('parameter/SET_APP_NAME', data.appName)-->
<!--          this.mode = data.mode-->

<!--          loading.close()-->

<!--          this.fetchTemplateTableList()-->
<!--        })-->
<!--        .catch(() => {-->
<!--          loading.close()-->
<!--        })-->
<!--    },-->

<!--    fetchTemplateTableList() {-->
<!--      return new Promise((resolve, reject) => {-->
<!--        getTemplateTableList(this.templateId)-->
<!--          .then((data) => {-->
<!--            this.$store.commit('parameter/SET_PROFILE_TABLES', data)-->
<!--            this.$set(-->
<!--              this.tables[0],-->
<!--              'children',-->
<!--              data.filter((item) => item.name !== 'Profile')-->
<!--            )-->
<!--            const profile = data.find(-->
<!--              (item) => item.id === this.tables[0].entryId-->
<!--            )-->
<!--            this.$set(this.tables, 0, {-->
<!--              ...this.tables[0],-->
<!--              id: profile.id,-->
<!--              name: profile.name,-->
<!--              tableType: profile.tableType-->
<!--            })-->
<!--            resolve(data)-->
<!--          })-->
<!--          .catch((err) => {-->
<!--            this.$message.error(err)-->
<!--            reject(err)-->
<!--          })-->
<!--      })-->
<!--    },-->

<!--    fetchBasicComponent() {-->
<!--      getBasicComponent().then((data) => {-->
<!--        this.basicComponents = [-->
<!--          ...data,-->
<!--          {-->
<!--            category: 'divider',-->
<!--            title: 'divider',-->
<!--            label: 'divider',-->
<!--            w: 3,-->
<!--            h: 1,-->
<!--            type: 2-->
<!--          }-->
<!--        ]-->
<!--      })-->
<!--    },-->

<!--    fetchCommonComponents() {-->
<!--      getCommonComponentList().then((data) => {-->
<!--        const arr = Array.from(new Set(data.map((item) => item.category)))-->
<!--        const commonComponents = arr.map((item) => ({-->
<!--          label: item,-->
<!--          children: []-->
<!--        }))-->
<!--        data.forEach((item) => {-->
<!--          const parent = commonComponents.find((v) => v.label === item.category)-->
<!--          console.log(parent)-->
<!--          parent.children.push(item)-->
<!--        })-->
<!--        this.commonComponents = commonComponents-->
<!--      })-->
<!--    },-->

<!--    selectTableVisibleChange(val) {-->
<!--      if (val) {-->
<!--        this.fetchReferenceTable(this.currentTabId)-->
<!--      }-->
<!--    },-->

<!--    fetchReferenceTable(tableId) {-->
<!--      return new Promise((resolve, reject) => {-->
<!--        this.selectLoading = true-->
<!--        getReferenceTable(this.templateId, tableId)-->
<!--          .then((data) => {-->
<!--            if (this.currentTab) {-->
<!--              this.currentTab.referenceTable = data-->
<!--            } else {-->
<!--              this.referenceTable = data-->
<!--            }-->
<!--            resolve(data)-->
<!--          })-->
<!--          .catch((err) => {-->
<!--            reject(err)-->
<!--          })-->
<!--          .finally(() => {-->
<!--            this.selectLoading = false-->
<!--          })-->
<!--      })-->
<!--    },-->

<!--    async fetchTemplateTableLayoutList(id) {-->
<!--      let referenceTable-->
<!--      this.layoutLoading = true-->
<!--      if (this.mode === 1) {-->
<!--        referenceTable = await this.fetchReferenceTable(id)-->
<!--      }-->
<!--      const res = await getTemplateTableLayoutList(this.templateId, id)-->
<!--      this.layoutLoading = false-->
<!--      // 防止连续点击的时候因为异步的问题导致添加了重复的选项卡-->
<!--      this.pushingData = false-->

<!--      // 组成符合格式的数组-->
<!--      const layoutData = res.map((item) => {-->
<!--        return generateLayoutData.call(this, item, referenceTable)-->
<!--      })-->

<!--      return { layoutData, referenceTable }-->
<!--    },-->

<!--    initTabData(data, layoutData, referenceTable, openNewTab) {-->
<!--      const form = {}-->
<!--      layoutData.forEach((data) => {-->
<!--        form[data.i] = data.defaultValues || ''-->
<!--      })-->

<!--      this.tabs.push({-->
<!--        ...data,-->
<!--        data: layoutData,-->
<!--        randomKey: Math.random(),-->
<!--        referenceTable,-->
<!--        positionChanged: false,-->
<!--        reservePosition: JSON.stringify(-->
<!--          layoutData.map((_) => ({-->
<!--            x: _.x,-->
<!--            y: _.y,-->
<!--            w: _.w,-->
<!--            h: _.h-->
<!--          }))-->
<!--        ),-->
<!--        reserveJSON: JSON.stringify(-->
<!--          layoutData.map((_) => ({-->
<!--            defaultValues: _.defaultValues,-->
<!--            label: _.label,-->
<!--            valueType: _.valueType,-->
<!--            maxLength: _.maxLength,-->
<!--            key: _.key,-->
<!--            table: _.table,-->
<!--            nullable: _.nullable-->
<!--          }))-->
<!--        ),-->
<!--        form,-->
<!--        paramSchemaDesignChange: this.$route.query.unsaved,-->
<!--        // 把初始数据保存到reserveData，进行撤销操作的时候直接拿来替换data-->
<!--        reserveData: deepClone(layoutData),-->
<!--        reserveForm: deepClone(form),-->
<!--        tableType: data.tableType-->
<!--      })-->
<!--      if (openNewTab) {-->
<!--        this.currentLayout = this.tabs[this.tabs.length - 1].data-->
<!--        this.activeId =-->
<!--          this.currentLayout.length > 0 ? this.currentLayout[0].i : ''-->
<!--      }-->

<!--      watchers.push(-->
<!--        this.$watch(-->
<!--          (vm) => vm.dataString,-->
<!--          function() {-->
<!--            if (this.currentTab.reserveJSON !== this.dataString) {-->
<!--              this.$set(this.currentTab, 'paramSchemaDesignChange', true)-->
<!--            } else {-->
<!--              this.$set(this.currentTab, 'paramSchemaDesignChange', false)-->
<!--            }-->
<!--          }-->
<!--        )-->
<!--      )-->

<!--      watchers.push(-->
<!--        this.$watch(-->
<!--          (vm) => vm.positionString,-->
<!--          function() {-->
<!--            if (this.currentTab.reservePosition !== this.positionString) {-->
<!--              this.$set(this.currentTab, 'positionChanged', true)-->
<!--            } else {-->
<!--              this.$set(this.currentTab, 'positionChanged', false)-->
<!--            }-->
<!--          }-->
<!--        )-->
<!--      )-->
<!--      // 初始化数据后默认高亮第一个参数-->

<!--      // 简单模式下多一个新增按钮-->
<!--      if (this.mode === 2) {-->
<!--        this.currentLayout.push({-->
<!--          x: this.currentLayout.length % 2,-->
<!--          y: this.yPosition,-->
<!--          i: 'new',-->
<!--          w: 1,-->
<!--          h: 2-->
<!--        })-->
<!--      }-->
<!--    },-->

<!--    handleTabClick(tab) {-->
<!--      const _tab = this.tabs.find((v) => v.id === tab.name)-->
<!--      this.currentLayout = _tab.data-->
<!--      _tab.randomKey = Math.random()-->
<!--      if (_tab.tableType === 3) {-->
<!--        this.page = 'EntryList'-->
<!--      } else {-->
<!--        this.page = 'Design'-->
<!--      }-->
<!--    },-->

<!--    handleTabRemove(id) {-->
<!--      const removeTab = () => {-->
<!--        this.tabs = this.tabs.filter((tab) => tab.id !== id)-->
<!--        this.newTab(this.tabs[0])-->
<!--      }-->

<!--      const tab = this.tabs.find((tab) => tab.id === id)-->
<!--      if (tab.paramSchemaDesignChange) {-->
<!--        this.$commonConfirm({-->
<!--          title: this.$t('flyparam.close_tab'),-->
<!--          content: `Your changes are unsaved, are you sure to close this tab?`,-->
<!--          btnSureTitle: this.$t('common.confirm'),-->
<!--          onConfirm: (instance, done) => {-->
<!--            removeTab()-->
<!--            done()-->
<!--          }-->
<!--        })-->
<!--      } else {-->
<!--        removeTab()-->
<!--      }-->
<!--    },-->

<!--    removeItem(id) {-->
<!--      const index = this.currentLayout.map((item) => item.i).indexOf(id)-->
<!--      this.currentLayout.splice(index, 1)-->
<!--    },-->
<!--    generateName(key) {-->
<!--      const reg = new RegExp(`${key}([0-9][0-9]*)`)-->
<!--      let max = -1-->
<!--      this.currentLayout.forEach((item) => {-->
<!--        if (item.key === key) {-->
<!--          max = 0-->
<!--        }-->
<!--        const matches = reg.exec(item.key)-->
<!--        if (matches) {-->
<!--          const index = Number(matches[1])-->
<!--          max = max >= index ? max : index-->
<!--        }-->
<!--      })-->
<!--      if (max >= 0) {-->
<!--        return `${key}${Number(max + 1)}`-->
<!--      }-->
<!--      return key-->
<!--    },-->
<!--    handleNewReference(table, tableId) {-->
<!--      this.fetchReferenceTable(tableId).then(() => {-->
<!--        this.addItem(this.selectedReferenceComponent, true)-->
<!--        this.newTab(table, false)-->
<!--      })-->
<!--    },-->
<!--    /**-->
<!--     * @desc 添加新的参数-->
<!--     * @param {Object} data - 参数数据-->
<!--     * @param {boolean} fromDialog - 是否是通过selectReferenceDialog添加的参数-->
<!--     */-->
<!--    addItem(data, fromDialog) {-->
<!--      // 参数卡片的宽高，如果是divider宽高分别是3 和 1-->
<!--      const w = data.type === 2 ? 3 : 1-->
<!--      const h = data.type === 2 ? 1 : 2-->
<!--      // 布局处于加载状态时，不可添加-->
<!--      if (this.layoutLoading) {-->
<!--        return-->
<!--      }-->
<!--      // 点击的是一个目录，不可添加-->

<!--      if (data.children) {-->
<!--        return-->
<!--      }-->

<!--      // 如果是引用类型，就打开选择引用表的弹窗-->
<!--      if (data.valueType === 5) {-->
<!--        if (!fromDialog) {-->
<!--          this.selectedReferenceComponent = data-->
<!--          return (this.newReferenceDialogVisible = true)-->
<!--        }-->
<!--      }-->

<!--      let newItem-->
<!--      if (this.mode === 1) {-->
<!--        // 赋予随机的唯一id-->
<!--        const i = uuidv4()-->
<!--        // 参数标签，每次新增的标签都不能与已存在的相同-->
<!--        const label = this.generateName(data.label)-->
<!--        const key = label.toLowerCase()-->
<!--        let defaultValues = ''-->
<!--        if (data.valueType === types.NUMBER) {-->
<!--          defaultValues = 0-->
<!--        } else if (data.valueType === types.BOOLEAN) {-->
<!--          defaultValues = false-->
<!--        }-->
<!--        newItem = {-->
<!--          i,-->
<!--          valueType: data.valueType,-->
<!--          type: data.type || 1,-->
<!--          value: data.value,-->
<!--          new: true,-->
<!--          ...data,-->
<!--          maxLength: data.valueType === types.HEX ? 2048 : data.maxLength,-->
<!--          defaultValues,-->
<!--          nullable: data.valueType === types.NUMBER ? 0 : 1,-->
<!--          x: 0,-->
<!--          y: this.layoutMap.length,-->
<!--          w: w,-->
<!--          h: h,-->
<!--          key,-->
<!--          label-->
<!--        }-->
<!--        // 主要是为了新参数插入的位置-->
<!--        if (this.layoutMap.length) {-->
<!--          for (let r = 0, rLen = this.layoutMap.length; r < rLen; r++) {-->
<!--            for (let c = 0; c <= this.colNumber - w; c++) {-->
<!--              const res = this.regionalTest(-->
<!--                c,-->
<!--                r,-->
<!--                w,-->
<!--                rLen > r + h ? h : rLen - r-->
<!--              )-->

<!--              if (res.result) {-->
<!--                // 更新添加数据内容-->
<!--                newItem = {-->
<!--                  ...newItem,-->
<!--                  x: res.x,-->
<!--                  y: res.y,-->
<!--                  w: w,-->
<!--                  h: h-->
<!--                }-->

<!--                c = this.colNumber + 1-->
<!--                r = rLen + 1-->
<!--              } else {-->
<!--                c = res.offsetX-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--        // 更新二维数组map，主要是为了新参数插入的位置-->
<!--        for (let itemR = 0; itemR < h; itemR++) {-->
<!--          for (let itemC = 0; itemC < w; itemC++) {-->
<!--            if (!this.layoutMap[newItem.y + itemR]) {-->
<!--              this.layoutMap[newItem.y + itemR] = new Array(this.colNumber)-->
<!--              for (let i = 0; i < this.colNumber; i++) {-->
<!--                this.layoutMap[newItem.y + itemR][i] = 0-->
<!--              }-->
<!--            }-->
<!--            // 标记点-->
<!--            this.layoutMap[newItem.y + itemR][newItem.x + itemC] = 1-->
<!--          }-->
<!--        }-->
<!--      } else if (this.mode === 2) {-->
<!--        // 简单模式下-->
<!--        const key = this.generateName('string')-->
<!--        newItem = {-->
<!--          x: (this.currentLayout.length - 1) % 2,-->
<!--          y: this.yPosition,-->
<!--          w: 1,-->
<!--          h: 2,-->
<!--          i: uuidv4(),-->
<!--          nullable: 1,-->
<!--          valueType: this.types.STRING,-->
<!--          label: key,-->
<!--          key: key,-->
<!--          type: 1,-->
<!--          defaultValues: '',-->
<!--          maxLength: 255-->
<!--        }-->
<!--      }-->

<!--      this.currentLayout.push(newItem)-->
<!--      this.$set(this.currentTab.form, newItem.i, newItem.defaultValues)-->
<!--      // this.$set(this.currentTab.form, newItem.i, '')-->
<!--      this.activeId = newItem.i-->

<!--      if (this.mode === 2) {-->
<!--        const item = this.currentLayout.find((item) => item.i === 'new')-->
<!--        this.$set(item, 'x', this.xPosition)-->
<!--        this.$set(item, 'y', this.yPosition * 2)-->
<!--      }-->
<!--    },-->

<!--    layoutReadyEvent() {-->
<!--      this.layoutMap = this.generateArr(this.currentLayout)-->
<!--    },-->

<!--    layoutUpdatedEvent() {-->
<!--      console.log('updated')-->
<!--      this.layoutMap = this.generateArr(this.currentLayout)-->
<!--    },-->

<!--    // 检测是否有空位置-->
<!--    regionalTest(x, y, w, h) {-->
<!--      // 定义返回 x,y 偏移 及 是否有空位置-->
<!--      let offsetX = 0-->
<!--      let offsetY = 0-->
<!--      let res = true-->
<!--      for (let r = 0; r < w; r++) {-->
<!--        for (let c = 0; c <= h; c++) {-->
<!--          const point = this.layoutMap[y + r] ? this.layoutMap[y + r][x + c] : 0-->
<!--          // 如该点被占据 记录偏移值-->
<!--          if (point === 1) {-->
<!--            res = false-->
<!--            offsetX = offsetX > x + c ? offsetX : x + c-->
<!--            offsetY = offsetY > y + r ? offsetY : y + r-->
<!--          }-->
<!--        }-->
<!--      }-->

<!--      return {-->
<!--        result: res,-->
<!--        offsetX: offsetX,-->
<!--        x: x,-->
<!--        y: y-->
<!--      }-->
<!--    },-->
<!--    // 生成二维数组数据-->
<!--    generateArr(data) {-->
<!--      const map = []-->
<!--      if (Array.isArray(data)) {-->
<!--        for (let i = 0; i < data.length; i++) {-->
<!--          const one = data[i]-->
<!--          // 循环行-->
<!--          for (let r = one.y; r < one.y + one.h; r++) {-->
<!--            // 循环列-->
<!--            for (let c = one.x; c < one.x + one.w; c++) {-->
<!--              // 检修当前行是否存在-->
<!--              if (!map[r]) {-->
<!--                map[r] = new Array(this.colNumber)-->

<!--                for (let i = 0; i < this.colNumber; i++) {-->
<!--                  map[r][i] = 0-->
<!--                }-->
<!--              }-->
<!--              // 占据为1-->
<!--              map[r][c] = 1-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--      return map-->
<!--    },-->

<!--    // 右侧valueType改变时的回调-->
<!--    handleValueTypeChange(val) {-->
<!--      console.log()-->
<!--      if (-->
<!--        [-->
<!--          types.BOOLEAN,-->
<!--          types.FILE,-->
<!--          types.TIME,-->
<!--          types.DATE,-->
<!--          types.DATETIME-->
<!--        ].includes(val)-->
<!--      ) {-->
<!--        this.currentItem.maxLength = 1-->
<!--      } else if (val === types.REFERENCE) {-->
<!--        this.currentItem.maxLength = 20-->
<!--      } else if (val === types.HEX) {-->
<!--        this.currentItem.maxLength = 2048-->
<!--      } else {-->
<!--        this.currentItem.maxLength = 255-->
<!--      }-->

<!--      this.currentItem.defaultValues = ''-->
<!--      this.currentTab.form[this.currentItem.i] = ''-->
<!--      this.currentItem.formatter = ''-->
<!--    },-->

<!--    handleNumberInputChange(val, currentItem) {-->
<!--      const value = val.replace(/[^?\d*\.?\d+]/g, '')-->
<!--      this.currentTab.form[currentItem.i] = value-->
<!--      this.currentItem.defaultValues = value-->
<!--    },-->
<!--    handleHexInputChange(val, currentItem) {-->
<!--      this.currentTab.form[currentItem.i] = val-->
<!--      this.currentItem.defaultValues = val-->
<!--      this.currentItem.defaultValues = this.currentItem.defaultValues.replace(-->
<!--        /[^A-Fa-f0-9]/g,-->
<!--        ''-->
<!--      )-->
<!--    },-->

<!--    handleHexMaxLengthInput(val) {-->
<!--      this.currentItem.maxLength = Number((val + '').replace(/[-.]/g, ''))-->
<!--    },-->

<!--    handleReferenceChange(val) {-->
<!--      this.currentItem.refTableSchemaId = val-->
<!--    },-->

<!--    handleStringInput(val, currentItem) {-->
<!--      this.currentTab.form[currentItem.i] = val-->
<!--      this.currentItem.defaultValues = val-->
<!--    },-->

<!--    // 右侧label输入框输入值时的回调-->
<!--    labelInputOnChange(value) {-->
<!--      this.layout.find((item) => item.i === this.activeId).label = value-->
<!--    },-->

<!--    defaultValueHandleChange(value) {-->
<!--      console.log(value)-->
<!--      this.layout.find((item) => item.i === this.activeId).defaultValue = value-->
<!--    },-->

<!--    // 点击右侧ReferenceTable下拉框里面的按钮触发，新建该table的选项卡-->
<!--    handleReferenceTableClick(id) {-->
<!--      const tableId = id || this.currentItem.table.id-->
<!--      const data = this.tables[0].children.find((child) => child.id === tableId)-->
<!--      this.newTab(data)-->
<!--    },-->

<!--    /**-->
<!--     * @desc 新建table成功后的回调-->
<!--     * @param tableName - 新建table的名称-->
<!--     */-->
<!--    handleNewTable(tableName) {-->
<!--      // 重新获取数据-->
<!--      this.fetchTemplateTableList().then((data) => {-->
<!--        const newTable = data.find((_) => _.name === tableName)-->
<!--        this.newTab(newTable)-->
<!--      })-->
<!--    },-->

<!--    /**-->
<!--     *  @desc 新增tab页-->
<!--     *  @param data tab页的data-->
<!--     *  @param openNewTab 新建后tab后是否直接跳到新tab-->
<!--     */-->
<!--    async newTab(data, openNewTab = true) {-->
<!--      if (this.pushingData || this.layoutLoading) {-->
<!--        return-->
<!--      }-->
<!--      const index = this.tabs.findIndex((tab) => tab.id === data.id)-->
<!--      this.$refs.tableTree.setCurrentKey(data.id)-->
<!--      if (index === -1) {-->
<!--        this.layoutLoading = true-->
<!--        this.pushingData = true-->
<!--        if (openNewTab) {-->
<!--          this.currentTabId = data.id-->
<!--        }-->
<!--        // 获取关联的表，用来回显-->
<!--        const { layoutData, referenceTable } =-->
<!--          await this.fetchTemplateTableLayoutList(data.id)-->
<!--        this.layoutLoading = false-->
<!--        this.initTabData(data, layoutData, referenceTable, openNewTab)-->
<!--      } else {-->
<!--        this.tabs[index].randomKey = Math.random()-->
<!--        this.currentLayout = this.tabs[index].data-->
<!--        this.activeId =-->
<!--          this.currentLayout.length > 0 ? this.currentLayout[0].i : ''-->
<!--        this.currentTabId = data.id-->
<!--      }-->
<!--      if (data.tableType === 3) {-->
<!--        if (openNewTab) {-->
<!--          this.page = 'EntryList'-->
<!--        }-->
<!--      } else {-->
<!--        this.page = 'Design'-->
<!--      }-->
<!--    },-->

<!--    // 保存指定的tab-->
<!--    save(tabId) {-->
<!--      const forms = this.$refs.layoutForm-->
<!--      const form = forms.find(_ => _.$attrs.id === tabId)-->
<!--      const tab = this.tabs.find(_ => _.id === tabId)-->
<!--      form.validate(async(valid) => {-->
<!--        if (valid) {-->
<!--          const arr = []-->
<!--          populateTabData(arr, [tab], false)-->

<!--          try {-->
<!--            this.layoutLoading = true-->
<!--            await saveTemplateLayout(this.templateId, arr)-->
<!--          } catch (err) {-->
<!--            return this.$message.error(err)-->
<!--          }-->

<!--          this.$message.success(this.$t('common.message.operation_success'))-->
<!--          try {-->
<!--            const { layoutData } = await this.fetchTemplateTableLayoutList(tabId)-->
<!--            const newItems = tab.data.filter((_) => _.new)-->

<!--            if (newItems.length > 0) {-->
<!--              newItems.forEach((_) => {-->
<!--                const newLayout = layoutData.find(-->
<!--                  (data) => data.key === _.key-->
<!--                )-->
<!--                tab.form[newLayout.i] = _.defaultValues-->
<!--              })-->
<!--            }-->

<!--            this.$set(tab, 'data', layoutData)-->
<!--            this.$set(tab, 'reserveData', [...layoutData])-->
<!--            this.$set(tab, 'paramSchemaDesignChange', false)-->
<!--            this.$set(tab, 'positionChanged', false)-->
<!--            this.$set(-->
<!--              tab,-->
<!--              'reserveJSON',-->
<!--              JSON.stringify(-->
<!--                layoutData.map((_) => ({-->
<!--                  defaultValues: _.defaultValues,-->
<!--                  label: _.label,-->
<!--                  valueType: _.valueType,-->
<!--                  maxLength: _.maxLength,-->
<!--                  key: _.key,-->
<!--                  table: _.table,-->
<!--                  nullable: _.nullable-->
<!--                }))-->
<!--              )-->
<!--            )-->
<!--            this.$set(-->
<!--              tab,-->
<!--              'reservePosition',-->
<!--              JSON.stringify(-->
<!--                layoutData.map((_) => ({-->
<!--                  x: _.x,-->
<!--                  y: _.y,-->
<!--                  w: _.w,-->
<!--                  h: _.h-->
<!--                }))-->
<!--              )-->
<!--            )-->
<!--          } catch (err) {-->
<!--            return this.$message.error(err)-->
<!--          }-->

<!--          if (tabId === this.currentTab.id) {-->
<!--            this.currentLayout = this.currentTab.data-->
<!--            if (this.mode === 2) {-->
<!--              this.currentLayout.push({-->
<!--                x: this.currentLayout.length % 2,-->
<!--                y: this.yPosition,-->
<!--                i: 'new',-->
<!--                w: 1,-->
<!--                h: 2-->
<!--              })-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      })-->
<!--    },-->

<!--    // 保存所有-->
<!--    async saveAll() {-->
<!--      const tabs = this.tabs.filter(-->
<!--        (tab) =>-->
<!--          tab.tableType !== 3 &&-->
<!--          (tab.paramSchemaDesignChange || tab.positionChanged)-->
<!--      )-->
<!--      if (tabs.length === 0) {-->
<!--        return-->
<!--      }-->
<!--      let valid = true-->
<!--      let forms = null-->
<!--      // const index = tabs.findIndex((tab) => tab.id === this.currentTabId)-->
<!--      forms = this.$refs.layoutForm-->
<!--      // 循环验证所有已打开的tab-->
<!--      forms.forEach((form, index) => {-->
<!--        form.validate((_valid) => {-->
<!--          // 只要有不通过验证的tab，就跳到该tab页面-->
<!--          if (!_valid) {-->
<!--            valid = false-->
<!--            this.page = 'Design'-->
<!--            this.currentTabId = form.$attrs.id-->
<!--            this.currentLayout = this.tabs.find(-->
<!--              (tab) => tab.id === form.$attrs.id-->
<!--            ).data-->
<!--          }-->
<!--        })-->
<!--      })-->

<!--      if (valid) {-->
<!--        const arr = []-->
<!--        const triggerPublish = false-->
<!--        populateTabData(arr, tabs, triggerPublish)-->

<!--        if (tabs.length > 0) {-->
<!--          try {-->
<!--            this.layoutLoading = true-->
<!--            await saveTemplateLayout(this.templateId, arr)-->
<!--            this.$message.success(this.$t('common.message.operation_success'))-->
<!--            tabs.forEach(async(tab) => {-->
<!--              const newItems = tab.data.filter((_) => _.new)-->
<!--              const { layoutData } = await this.fetchTemplateTableLayoutList(-->
<!--                tab.id-->
<!--              )-->
<!--              if (newItems.length > 0) {-->
<!--                newItems.forEach((_) => {-->
<!--                  const newLayout = layoutData.find(-->
<!--                    (data) => data.key === _.key-->
<!--                  )-->
<!--                  tab.form[newLayout.i] = _.defaultValues-->
<!--                })-->
<!--              }-->
<!--              this.$set(tab, 'data', layoutData)-->
<!--              this.$set(tab, 'reserveData', [...layoutData])-->
<!--              this.$set(tab, 'paramSchemaDesignChange', false)-->
<!--              this.$set(tab, 'positionChanged', false)-->
<!--              this.$set(-->
<!--                tab,-->
<!--                'reserveJSON',-->
<!--                JSON.stringify(-->
<!--                  layoutData.map((_) => ({-->
<!--                    defaultValues: _.defaultValues,-->
<!--                    label: _.label,-->
<!--                    valueType: _.valueType,-->
<!--                    maxLength: _.maxLength,-->
<!--                    key: _.key,-->
<!--                    table: _.table,-->
<!--                    nullable: _.nullable-->
<!--                  }))-->
<!--                )-->
<!--              )-->
<!--              this.$set(-->
<!--                tab,-->
<!--                'reservePosition',-->
<!--                JSON.stringify(-->
<!--                  layoutData.map((_) => ({-->
<!--                    x: _.x,-->
<!--                    y: _.y,-->
<!--                    w: _.w,-->
<!--                    h: _.h-->
<!--                  }))-->
<!--                )-->
<!--              )-->
<!--              this.currentLayout = this.currentTab.data-->
<!--              if (this.mode === 2) {-->
<!--                this.currentLayout.push({-->
<!--                  x: this.currentLayout.length % 2,-->
<!--                  y: this.yPosition,-->
<!--                  i: 'new',-->
<!--                  w: 1,-->
<!--                  h: 2-->
<!--                })-->
<!--              }-->
<!--            })-->
<!--          } catch (err) {-->
<!--            this.$message.error(err.message)-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    },-->

<!--    previewTemplate(fileType) {-->
<!--      this.jsonDrawerVisible = true-->
<!--      this.previewDrawerLoading = true-->
<!--      this.previewDrawerFileType = fileType-->
<!--      getParameterTemplatePreview(this.templateId, fileType).then((data) => {-->
<!--        this.previewDrawerLoading = false-->
<!--        if (fileType === 1) {-->
<!--          this.jsonStr = JSON.parse(base64.decode(data.previewData))-->
<!--        } else if (fileType === 2) {-->
<!--          this.jsonStr = data.previewData-->
<!--          this.$refs.previewDrawer.decode(data.previewData)-->
<!--        } else if (fileType === 3) {-->
<!--          const xml = base64.decode(data.previewData)-->
<!--          // const xml = formatXml(base64.decode(data.previewData))-->
<!--          this.jsonStr = formatXml(xml, {-->
<!--            indentation: '  ',-->
<!--            filter: (node) => node.type !== 'Comment',-->
<!--            collapseContent: true,-->
<!--            lineSeparator: '\n'-->
<!--          })-->
<!--        }-->

<!--        console.log(this.jsonStr)-->
<!--      })-->
<!--    },-->

<!--    handleCommand(command) {-->
<!--      if (command === 'new') {-->
<!--        this.newComponentDialogType = 'save'-->
<!--        this.newComponentVisible = true-->
<!--      } else if (command === 'import/export') {-->
<!--        this.componentImportVisible = true-->
<!--      }-->
<!--    },-->

<!--    handleComponentCommand(command, data) {-->
<!--      if (command === 'edit') {-->
<!--        this.editCommonComponent(data)-->
<!--      } else if (command === 'remove') {-->
<!--        this.removeCommonComponent(data)-->
<!--      }-->
<!--    },-->

<!--    handlePreviewCommand(command) {-->
<!--      if (command === 'confPagePreview') {-->
<!--        this.configPreviewDialogVisible = true-->
<!--        this.configurationPreviewKey = Math.random()-->
<!--      } else if (command === 'dataPreview') {-->
<!--        this.previewTemplate(1)-->
<!--      }-->
<!--    },-->
<!--    handleToolbarCommand(command) {-->
<!--      if (command === 'import/export') {-->
<!--        this.importExportVisible = true-->
<!--      } else if (command === 'redesign') {-->
<!--        this.redesignDialogVisible = true-->
<!--      } else if (command === 'undo') {-->
<!--        this.undoDialogVisible = true-->
<!--      } else if (command === 'batch') {-->
<!--        this.$confirm(this.$t('flyparam.generate_batch'), this.$t('flyparam.warning'), {-->
<!--          confirmButtonText: this.$t('common.confirm'),-->
<!--          cancelButtonText: this.$t('common.cancel'),-->
<!--          type: 'warning'-->
<!--        }).then(() => {-->
<!--          runBatch(this.templateId).then(() => {-->
<!--            this.$message.success(this.$t('common.operated_successfully'))-->
<!--          })-->
<!--        })-->
<!--      } else if (command === 'document') {-->
<!--        this.$router.push('/parameter/document/home')-->
<!--      }-->
<!--    },-->

<!--    undo(type) {-->
<!--      // 重置所有tab的数据-->
<!--      if (type === 1) {-->
<!--        this.tabs.forEach((tab) => {-->
<!--          this.$set(tab, 'data', deepClone(tab.reserveData))-->
<!--          this.$set(tab, 'form', deepClone(tab.reserveForm))-->
<!--          tab.paramSchemaDesignChange = false-->
<!--          tab.positionChanged = false-->
<!--        })-->
<!--      } else if (type === 2) {-->
<!--        // 重置当前tab的数据-->
<!--        const tab = this.tabs.find((tab) => tab.id === this.currentTabId)-->
<!--        this.$set(tab, 'data', deepClone(tab.reserveData))-->
<!--      }-->

<!--      // 移除校验结果-->
<!--      const forms = this.$refs.layoutForm-->
<!--      forms.forEach((form) => form.clearValidate())-->

<!--      this.currentLayout = this.tabs.find(-->
<!--        (tab) => tab.id === this.currentTabId-->
<!--      ).data-->
<!--      this.$refs.form-->
<!--    },-->

<!--    handleTableDropdownCommand(command, data) {-->
<!--      if (command === 'delete') {-->
<!--        this.$commonConfirm({-->
<!--          title: this.$t('flyparam.delete_component'),-->
<!--          type: 'danger',-->
<!--          content: this.$t('flyparam.delete_table_warning', { name: data.name }),-->
<!--          btnSureTitle: this.$t('common.delete'),-->
<!--          onConfirm: (instance, done) => {-->
<!--            instance.loading = true-->
<!--            deleteTable(this.templateId, data.id)-->
<!--              .then((res) => {-->
<!--                this.$message.success(this.$t('page.delete_success'))-->
<!--                // 选项卡中有被删除的table，则关闭该选项卡-->
<!--                this.tabs = this.tabs.filter((tab) => tab.id !== data.id)-->
<!--                // 如果被删除的table是当前打开的选项卡，还需要将当前选项卡切换到第一个-->
<!--                if (this.currentTabId === data.id) {-->
<!--                  this.currentTabId = this.tabs[0].id-->
<!--                  this.currentLayout = this.tabs[0].data-->
<!--                  this.activeId =-->
<!--                    this.currentLayout.length > 0 ? this.currentLayout[0].i : ''-->
<!--                }-->
<!--                done()-->
<!--                this.fetchTemplateTableList()-->
<!--              })-->
<!--              .catch((e) =>-->
<!--                this.$confirmError(e).then(() => {-->
<!--                  done()-->
<!--                })-->
<!--              )-->
<!--          }-->
<!--        })-->
<!--      } else if (command === 'rename') {-->
<!--        this.renameDialogVisible = true-->
<!--        this.renameId = data.id-->
<!--        this.renameName = data.name-->
<!--      }-->
<!--    },-->

<!--    handleEntryListOnClick() {-->
<!--      this.page = 'EntryList'-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs.entryList[0].fetchReferenceEntryRecord()-->
<!--      })-->
<!--    },-->

<!--    editCommonComponent(component) {-->
<!--      this.newComponentDialogType = 'update'-->
<!--      this.newComponentVisible = true-->
<!--      this.comoponentDialogData = component-->
<!--    },-->

<!--    removeCommonComponent(component) {-->
<!--      this.$commonConfirm({-->
<!--        title: this.$t('flyparam.delete_component'),-->
<!--        type: 'danger',-->
<!--        content: this.$t('flyparam.delete_component_warning', { label: component.label }),-->
<!--        btnSureTitle: this.$t('common.delete'),-->
<!--        onConfirm: (instance, done) => {-->
<!--          instance.loading = true-->
<!--          deleteCommonComponent(component.componentId)-->
<!--            .then((res) => {-->
<!--              this.$message.success(this.$t('page.delete_success'))-->
<!--              done()-->
<!--              this.fetchCommonComponents()-->
<!--            })-->
<!--            .catch((e) =>-->
<!--              this.$confirmError(e).then(() => {-->
<!--                done()-->
<!--              })-->
<!--            )-->
<!--        }-->
<!--      })-->
<!--    },-->

<!--    handleFileUploadConfirm(filePath) {-->
<!--      const item = this.currentLayout.find((item) => item.i === this.activeId)-->
<!--      this.$set(item, 'defaultValues', filePath)-->
<!--    },-->

<!--    handleSelectReference(item) {-->
<!--      this.activeId = item.i-->
<!--      if (this.refTableType === 3) {-->
<!--        getReferenceEntryRecord(this.templateId, this.currentItem.table.id, {-->
<!--          pageNo: 1,-->
<!--          pageSize: 30-->
<!--        })-->
<!--          .then((data) => {-->
<!--            const value = data.items.map((item) => {-->
<!--              return item.Label[0]-->
<!--            })-->
<!--            this.$set(this.currentItem, 'referenceValues', value)-->
<!--          })-->
<!--          .finally(() => {-->
<!--            this.loading = false-->
<!--          })-->
<!--      } else if (this.refTableType === 1) {-->
<!--        this.layoutPreviewVisible = true-->
<!--      } else {-->
<!--        this.activeId = item.i-->
<!--        if (this.currentItem.table) {-->
<!--          this.selectReferenceVisible = true-->
<!--        } else {-->
<!--          this.$message.error(this.$t('flyparam.select_table_warning'))-->
<!--        }-->
<!--      }-->
<!--    },-->

<!--    // 重新设计成功后的回调-->
<!--    handleRedesignConfirm() {-->
<!--      if (this.paramTemplateId) {-->
<!--        this.$emit('redesign')-->
<!--      }-->
<!--    },-->

<!--    handleSelectFile(id) {-->
<!--      this.activeId = id-->
<!--      this.uploadFileVisible = true-->
<!--    },-->

<!--    drag: function(e) {-->
<!--      const parentRect = document-->
<!--        .getElementById('content')-->
<!--        .getBoundingClientRect()-->
<!--      let mouseInGrid = false-->
<!--      if (-->
<!--        mouseXY.x > parentRect.left &&-->
<!--        mouseXY.x < parentRect.right &&-->
<!--        mouseXY.y > parentRect.top &&-->
<!--        mouseXY.y < parentRect.bottom-->
<!--      ) {-->
<!--        mouseInGrid = true-->
<!--      }-->
<!--      if (-->
<!--        mouseInGrid === true &&-->
<!--        this.layout.findIndex((item) => item.i === 'drop') === -1-->
<!--      ) {-->
<!--        this.layout.push({-->
<!--          x: (this.layout.length * 2) % (this.colNum || 12),-->
<!--          y: this.layout.length + (this.colNum || 12), // puts it at the bottom-->
<!--          w: 1,-->
<!--          h: 1,-->
<!--          i: 'drop'-->
<!--        })-->
<!--      }-->
<!--      const index = this.layout.findIndex((item) => item.i === 'drop')-->
<!--      if (index !== -1) {-->
<!--        try {-->
<!--          this.$refs.gridlayout.$children[-->
<!--            this.layout.length-->
<!--          ].$refs.item.style.display = 'none'-->
<!--        } catch {}-->
<!--        const el = this.$refs.gridlayout.$children[index]-->
<!--        el.dragging = {-->
<!--          top: mouseXY.y - parentRect.top,-->
<!--          left: mouseXY.x - parentRect.left-->
<!--        }-->
<!--        const new_pos = el.calcXY(-->
<!--          mouseXY.y - parentRect.top,-->
<!--          mouseXY.x - parentRect.left-->
<!--        )-->
<!--        if (mouseInGrid === true) {-->
<!--          this.$refs.gridlayout.dragEvent(-->
<!--            'dragstart',-->
<!--            'drop',-->
<!--            new_pos.x,-->
<!--            new_pos.y,-->
<!--            1,-->
<!--            1-->
<!--          )-->
<!--          DragPos.i = String(index)-->
<!--          DragPos.x = this.layout[index].x-->
<!--          DragPos.y = this.layout[index].y-->
<!--        }-->
<!--        if (mouseInGrid === false) {-->
<!--          this.$refs.gridlayout.dragEvent(-->
<!--            'dragend',-->
<!--            'drop',-->
<!--            new_pos.x,-->
<!--            new_pos.y,-->
<!--            1,-->
<!--            1-->
<!--          )-->
<!--          this.layout = this.layout.filter((obj) => obj.i !== 'drop')-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    dragend: function(e) {-->
<!--      const parentRect = document-->
<!--        .getElementById('content')-->
<!--        .getBoundingClientRect()-->
<!--      let mouseInGrid = false-->
<!--      if (-->
<!--        mouseXY.x > parentRect.left &&-->
<!--        mouseXY.x < parentRect.right &&-->
<!--        mouseXY.y > parentRect.top &&-->
<!--        mouseXY.y < parentRect.bottom-->
<!--      ) {-->
<!--        mouseInGrid = true-->
<!--      }-->
<!--      if (mouseInGrid === true) {-->
<!--        this.$refs.gridlayout.dragEvent(-->
<!--          'dragend',-->
<!--          'drop',-->
<!--          DragPos.x,-->
<!--          DragPos.y,-->
<!--          1,-->
<!--          1-->
<!--        )-->
<!--        this.layout = this.layout.filter((obj) => obj.i !== 'drop')-->

<!--        this.layout.push({-->
<!--          x: DragPos.x,-->
<!--          y: DragPos.y,-->
<!--          w: 1,-->
<!--          h: 1,-->
<!--          i: DragPos.i-->
<!--        })-->
<!--        this.$refs.gridlayout.dragEvent(-->
<!--          'dragend',-->
<!--          DragPos.i,-->
<!--          DragPos.x,-->
<!--          DragPos.y,-->
<!--          1,-->
<!--          1-->
<!--        )-->
<!--        try {-->
<!--          this.$refs.gridlayout.$children[-->
<!--            this.layout.length-->
<!--          ].$refs.item.style.display = 'block'-->
<!--        } catch {}-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->
<!--.flyparameter {-->
<!--  background-color: #edf2f9;-->
<!--  min-height: calc(100vh - 60px);-->

<!--  .sidebar-table .el-tree .el-icon-caret-right {-->
<!--    display: none;-->
<!--  }-->

<!--  .el-tabs&#45;&#45;border-card > .el-tabs__content {-->
<!--    padding: 5px;-->
<!--  }-->

<!--  .el-tabs__nav-wrap::after {-->
<!--    /* display: none; */-->
<!--  }-->

<!--  .sidebar .sidebar-components {-->
<!--    .components-dropdown.el-dropdown {-->
<!--      position: absolute;-->
<!--      top: 10px;-->
<!--      right: 13px;-->
<!--      z-index: 2;-->
<!--    }-->

<!--    .components-menu {-->
<!--      font-size: 24px;-->
<!--      cursor: pointer;-->
<!--      z-index: 2;-->

<!--      &:hover {-->
<!--        color: rgba(64, 158, 255, var(&#45;&#45;tw-text-opacity));-->
<!--      }-->
<!--    }-->

<!--    .el-tabs__content {-->
<!--      margin-top: 10px;-->
<!--    }-->
<!--  }-->

<!--  .main-content {-->
<!--    .el-card__body {-->
<!--      padding: 0;-->
<!--    }-->

<!--    .el-tabs__new-tab {-->
<!--      display: none;-->
<!--    }-->

<!--    .main-content__right {-->
<!--      .el-form-item {-->
<!--        margin-bottom: 4px;-->

<!--        .el-select {-->
<!--          display: block;-->
<!--        }-->
<!--      }-->

<!--      .el-form-item__label {-->
<!--        float: none;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->

<!--<style lang="scss" scoped>-->
<!--$activeColor: #409eff;-->
<!--@import '@/styles/mixin.scss';-->
<!--@include parameterCard;-->

<!--::v-deep .sidebar-components .el-tabs__content {-->
<!--  // max-height: 220px;-->
<!--  overflow-y: auto;-->
<!--}-->

<!--::v-deep .vue-grid-item > .vue-resizable-handle {-->
<!--  padding: 0;-->
<!--}-->

<!--::v-deep .sidebar-components .el-tabs&#45;&#45;top .el-tabs__item.is-top:nth-child(2) {-->
<!--  padding-left: 20px;-->
<!--}-->

<!--.param-properties {-->
<!--@include elSelectAppend;-->

<!--}-->

<!--.save-dropdown {-->
<!--  border: 1px solid transparent;-->
<!--  margin-right: 10px;-->
<!--  &:hover {-->
<!--    border-color: #DCDFE6;-->
<!--  }-->

<!--  &::v-deep {-->
<!--    .el-button {-->
<!--      border: 0;-->
<!--      padding: 2px 10px;-->
<!--      &:hover {-->
<!--        border-color: #DCDFE6;-->
<!--      }-->
<!--      &.el-dropdown__caret-button {-->
<!--        padding: 2px 0;-->
<!--        height: 22px;-->
<!--        &::before {-->
<!--          display: none;-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.flyparameter {-->
<!--  #content {-->
<!--    height: calc(100vh - 180px);-->
<!--    overflow-y: auto;-->
<!--    overflow-x: hidden;-->
<!--  }-->

<!--  .tree-node-active {-->
<!--    color: $activeColor;-->
<!--  }-->

<!--  .icon-plus {-->
<!--    float: right;-->
<!--    font-weight: bold;-->
<!--    @apply text-secondary hover:text-element-blue transition-colors;-->
<!--    cursor: pointer;-->
<!--  }-->

<!--  .flyparameter-design-row {-->
<!--    min-height: calc(100vh - 104px);-->
<!--  }-->

<!--  .param-button-group {-->
<!--    position: absolute;-->
<!--    z-index: 1;-->
<!--    right: 6px;-->
<!--    top: 6px;-->

<!--    button {-->
<!--      &.active {-->
<!--        background-color: #ffffff;-->
<!--        color: #409eff;-->
<!--        border: 1px solid transparent;-->
<!--        border-right-color: #dcdfe6;-->
<!--        border-left-color: #dcdfe6;-->

<!--        &:last-child {-->
<!--          margin-right: -1px;-->
<!--        }-->
<!--      }-->

<!--      background-color: #f5f7fa;-->
<!--      color: #767676;-->
<!--      padding: 10px 20px;-->
<!--      font-weight: bold;-->
<!--    }-->
<!--  }-->

<!--  .toolbar {-->
<!--    .toolbar-icon {-->
<!--      cursor: pointer;-->
<!--    }-->

<!--    .icon-save {-->
<!--      color: #409eff;-->
<!--      &.disabled {-->
<!--        cursor: not-allowed;-->
<!--        color: #000000;-->
<!--        opacity: 0.2;-->
<!--      }-->
<!--    }-->

<!--    .icon-eye {-->
<!--      color: #05cd2d;-->
<!--    }-->

<!--    .dropdown-container {-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--    }-->
<!--  }-->

<!--  .sidebar {-->
<!--    height: calc(100vh - 104px);-->

<!--    .sidbar-table,-->
<!--    .sidebar-components {-->
<!--      height: 50%;-->
<!--    }-->

<!--    .sidebar-body {-->
<!--      height: calc(100% - 42.5px);-->
<!--    }-->

<!--    .sidebar-table,-->
<!--    .sidebar-components {-->
<!--      background-color: #ffffff;-->

<!--      .sidebar-title {-->
<!--        padding: 10px;-->
<!--        color: #9e9e9e;-->
<!--        background-color: #f5f7fa;-->
<!--      }-->

<!--      .basic-components {-->
<!--        color: #606266;-->

<!--        li {-->
<!--          display: flex;-->
<!--          align-items: center;-->
<!--          justify-content: space-between;-->
<!--          height: 26px;-->
<!--          padding: 0 12px 0 8px;-->

<!--          &:hover {-->
<!--            background-color: #f5f7fa;-->
<!--          }-->

<!--          .basic-component__label {-->
<!--            @apply flex items-center;-->
<!--            i,-->
<!--            img {-->
<!--              @apply mr-2;-->
<!--            }-->
<!--          }-->

<!--          .icon-plus {-->
<!--            float: right;-->
<!--            font-weight: bold;-->
<!--            @apply text-secondary hover:text-element-blue transition-colors;-->
<!--            cursor: pointer;-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->

<!--    .sidebar-table {-->
<!--      // min-height: 200px;-->
<!--      .sidebar-body {-->
<!--      }-->
<!--    }-->

<!--    .sidebar-components {-->
<!--      //height: calc(100vh - 310px);-->
<!--    }-->

<!--    .sidebar-body {-->
<!--      padding: 5px;-->

<!--      overflow: auto;-->
<!--      position: relative;-->
<!--    }-->
<!--  }-->

<!--  .main-content {-->
<!--    // padding: 10px;-->
<!--    padding: 5px;-->

<!--    .main-content__left {-->
<!--      /* padding: 20px; */-->
<!--      border-right: 1px solid #edf2f9;-->
<!--    }-->

<!--    .param-properties__title {-->
<!--      padding: 10px;-->
<!--      color: #9e9e9e;-->
<!--      /* background-color: #f5f7fa; */-->
<!--    }-->

<!--    .main-content__right {-->
<!--      padding: 0px 20px 20px;-->
<!--      min-height: 487px;-->
<!--    }-->
<!--  }-->

<!--  @include elSelectAppend;-->
<!--}-->
<!--</style>-->
